<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片转PDF工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="./format/css2.css" rel="stylesheet">
    <style>
      :root {
        /* 拟态风格颜色变量 */
        --primary-rgb: 59, 130, 246;
        --bg-primary: #f0f4f8;
        --bg-secondary: #e2e8f0;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --border-radius: 20px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* 拟态阴影 */
        --shadow-inset: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
        --shadow-outset: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
        --shadow-medium: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
        --shadow-small: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
      }
      
      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        color: var(--text-primary);
        font-weight: 400;
        line-height: 1.6;
        overflow-x: hidden;
      }
      
      .theme-transition {
        transition: var(--transition);
      }
      
      /* 时间主题色定义 */
      .morning-theme {
        --primary: #3b82f6;
        --primary-rgb: 59, 130, 246;
        --bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        --card: #ffffff;
        --text: #1e293b;
        --shadow-dark: #bfdbfe;
        --shadow-light: #ffffff;
      }
      .noon-theme {
        --primary: #f59e0b;
        --primary-rgb: 245, 158, 11;
        --bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        --card: #fff7e6;
        --text: #1e293b;
        --shadow-dark: #fde68a;
        --shadow-light: #ffffff;
      }
      .afternoon-theme {
        --primary: #10b981;
        --primary-rgb: 16, 185, 129;
        --bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        --card: #e0f2e9;
        --text: #1e293b;
        --shadow-dark: #a7f3d0;
        --shadow-light: #ffffff;
      }
      .evening-theme {
        --primary: #f97316;
        --primary-rgb: 249, 115, 22;
        --bg: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
        --card: #ffedd5;
        --text: #1e293b;
        --shadow-dark: #fdba74;
        --shadow-light: #ffffff;
      }
      .night-theme {
        --primary: #8b5cf6;
        --primary-rgb: 139, 92, 246;
        --bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        --card: #334155;
        --text: #f1f5f9;
        --shadow-dark: #0f172a;
        --shadow-light: #475569;
      }

      /* 容器和布局 */
      .main-container {
        background: var(--bg);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-outset);
        backdrop-filter: blur(10px);
        animation: containerFloat 6s ease-in-out infinite;
      }
      
      @keyframes containerFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
      }
      
      /* 标题动效 */
      .header-title {
        background: linear-gradient(45deg, var(--primary), #667eea, var(--primary));
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: headerShine 3s ease-in-out infinite;
      }
      
      @keyframes headerShine {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      
      .header-icon {
        background: linear-gradient(135deg, var(--primary), #667eea);
        box-shadow: var(--shadow-medium);
        animation: iconPulse 2s ease-in-out infinite;
      }
      
      @keyframes iconPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }
      
      /* 卡片样式 */
      .neumorphism-card {
        background: var(--card);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-outset);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }
      
      .neumorphism-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: var(--transition);
      }
      
      .neumorphism-card:hover::before {
        left: 100%;
      }
      
      .neumorphism-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-outset), 0 8px 25px rgba(var(--primary-rgb), 0.15);
      }
      
      /* 自定义滚动条 */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: var(--shadow-dark);
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary), #667eea);
        border-radius: 4px;
        box-shadow: var(--shadow-small);
      }
      
      /* 拖放区域 */
      .drop-area {
        background: var(--card);
        border: 2px dashed var(--text-secondary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-inset);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }
      
      .drop-area::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: var(--transition);
      }
      
      .drop-area:hover::before,
      .drop-area.dragover::before {
        opacity: 1;
      }
      
      .drop-area:hover,
      .drop-area.dragover {
        border-color: var(--primary);
        box-shadow: var(--shadow-inset), inset 0 0 20px rgba(var(--primary-rgb), 0.1);
        transform: scale(1.02);
      }
      
      .upload-icon {
        animation: iconFloat 3s ease-in-out infinite;
      }
      
      @keyframes iconFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
      }
      
      /* 图片预览 */
      .image-preview {
        border-radius: 12px;
        box-shadow: var(--shadow-medium);
        transition: var(--transition);
        overflow: hidden;
        position: relative;
      }
      
      .image-preview:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-outset), 0 8px 25px rgba(var(--primary-rgb), 0.2);
      }
      
      .image-preview::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.6s;
      }
      
      .image-preview:hover::after {
         transform: translateX(100%);
       }
       
       /* 表单元素样式 */
       .neumorphism-input {
         background: var(--card);
         border: none;
         border-radius: 12px;
         box-shadow: var(--shadow-inset);
         padding: 12px 16px;
         font-size: 14px;
         font-weight: 500;
         color: var(--text-primary);
         transition: var(--transition);
         width: 100%;
       }
       
       .neumorphism-input:focus {
         outline: none;
         box-shadow: var(--shadow-inset), inset 0 0 0 2px rgba(var(--primary-rgb), 0.3);
       }
       
       .neumorphism-select {
         background: var(--card);
         border: none;
         border-radius: 12px;
         box-shadow: var(--shadow-inset);
         padding: 12px 16px;
         font-size: 14px;
         font-weight: 500;
         color: var(--text-primary);
         transition: var(--transition);
         width: 100%;
         cursor: pointer;
       }
       
       .neumorphism-select:focus {
         outline: none;
         box-shadow: var(--shadow-inset), inset 0 0 0 2px rgba(var(--primary-rgb), 0.3);
       }
       
       .form-label {
         display: block;
         font-weight: 600;
         font-size: 14px;
         color: var(--text-primary);
         margin-bottom: 8px;
         letter-spacing: 0.025em;
       }
       
       .section-title {
         font-weight: 600;
         font-size: 16px;
         color: var(--primary);
         margin-bottom: 16px;
         display: flex;
         align-items: center;
         gap: 8px;
       }
       
       /* 按钮样式 */
       .neumorphism-button {
         background: linear-gradient(135deg, var(--primary), #667eea);
         border: none;
         border-radius: 16px;
         box-shadow: var(--shadow-outset);
         color: white;
         font-weight: 600;
         font-size: 16px;
         padding: 16px 24px;
         transition: var(--transition);
         cursor: pointer;
         position: relative;
         overflow: hidden;
       }
       
       .neumorphism-button::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
         transition: var(--transition);
       }
       
       .neumorphism-button:hover::before {
         left: 100%;
       }
       
       .neumorphism-button:hover {
         transform: translateY(-2px);
         box-shadow: var(--shadow-outset), 0 8px 25px rgba(var(--primary-rgb), 0.3);
       }
       
       .neumorphism-button:active {
         transform: translateY(0);
         box-shadow: var(--shadow-inset);
       }
       
       .neumorphism-button:disabled {
         opacity: 0.6;
         cursor: not-allowed;
         transform: none;
       }
       
       .secondary-button {
         background: var(--card);
         color: var(--text-primary);
         box-shadow: var(--shadow-outset);
       }
       
       .secondary-button:hover {
          background: linear-gradient(135deg, var(--card), var(--shadow-light));
        }
        
        /* 移动端响应式设计 */
        @media (max-width: 1024px) {
          .main-container {
            padding: 16px;
          }
          
          .grid {
            grid-template-columns: 1fr;
            gap: 24px;
          }
          
          .neumorphism-card {
            padding: 20px;
          }
        }
        
        @media (max-width: 768px) {
          .main-container {
            padding: 12px;
          }
          
          .header-title {
            font-size: 24px;
          }
          
          .neumorphism-card {
            padding: 16px;
          }
          
          .grid-cols-2 {
            grid-template-columns: 1fr;
          }
          
          .neumorphism-button {
            padding: 14px 20px;
            font-size: 15px;
          }
          
          .form-label {
            font-size: 13px;
          }
          
          .neumorphism-input,
          .neumorphism-select {
            padding: 10px 14px;
            font-size: 13px;
          }
        }
        
        @media (max-width: 480px) {
          .main-container {
            padding: 8px;
          }
          
          .header-title {
            font-size: 20px;
          }
          
          .neumorphism-card {
            padding: 12px;
          }
          
          .section-title {
            font-size: 14px;
          }
          
          .neumorphism-button {
            padding: 12px 16px;
            font-size: 14px;
          }
          
          .form-label {
            font-size: 12px;
            margin-bottom: 6px;
          }
          
          .neumorphism-input,
          .neumorphism-select {
            padding: 8px 12px;
            font-size: 12px;
          }
          
          .drop-area {
            padding: 20px;
          }
          
          .upload-icon {
             width: 40px;
             height: 40px;
           }
         }
         
         /* CSS动画关键帧 */
         @keyframes containerFloat {
           0%, 100% { transform: translateY(0px); }
           50% { transform: translateY(-5px); }
         }
         
         @keyframes headerShine {
           0% { background-position: -200% center; }
           100% { background-position: 200% center; }
         }
         
         @keyframes iconPulse {
           0%, 100% { transform: scale(1); }
           50% { transform: scale(1.05); }
         }
         
         @keyframes iconFloat {
           0%, 100% { transform: translateY(0px) rotate(0deg); }
           25% { transform: translateY(-3px) rotate(1deg); }
           75% { transform: translateY(3px) rotate(-1deg); }
         }
         
         @keyframes slideIn {
           from {
             opacity: 0;
             transform: translateY(20px);
           }
           to {
             opacity: 1;
             transform: translateY(0);
           }
         }
         
         @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
         }
         
         @keyframes shimmer {
           0% { transform: translateX(-100%); }
           100% { transform: translateX(100%); }
         }
    </style>
  </head>
  <body class="theme-transition min-h-screen flex flex-col">
    <div class="max-w-6xl mx-auto px-4 py-6 w-full main-container">
      <!-- 头部标题 -->
      <header class="mb-8 text-center">
        <div class="flex items-center justify-center gap-4">
          <div class="header-icon p-4 rounded-full">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
          </div>
          <h1 class="text-4xl font-bold header-title">图片转PDF工具</h1>
        </div>
        <p class="text-lg mt-4 font-medium" style="color: var(--text-secondary);">
          快速将多张图片转换为专业的PDF文档(第一次转换需要加载字体,请耐心等待)
        </p>
      </header>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 左侧操作面板 -->
        <div class="space-y-6">
          <!-- 上传区域 -->
          <div class="neumorphism-card p-6">
            <h2 class="text-xl font-semibold mb-6 flex items-center gap-3" style="color: var(--text-primary);">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                style="color: var(--primary);"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
                />
              </svg>
              上传图片
            </h2>
            <div
              class="drop-area p-8 text-center cursor-pointer"
              id="dropArea"
            >
              <input
                type="file"
                id="imagesInput"
                accept="image/*"
                multiple
                class="hidden"
              />
              <div class="flex flex-col items-center justify-center py-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="upload-icon h-16 w-16 mb-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  style="color: var(--primary);"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
                  />
                </svg>
                <p class="font-semibold text-lg mb-2" style="color: var(--text-primary);">
                  拖放图片到此处或<span style="color: var(--primary);">
                    点击选择</span
                  >
                </p>
                <p class="text-sm font-medium" style="color: var(--text-secondary);">支持 JPG, PNG, WEBP 格式</p>
              </div>
            </div>
          </div>

          <!-- 图片预览区 -->
          <div class="neumorphism-card p-6">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-xl font-semibold flex items-center gap-3" style="color: var(--text-primary);">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  style="color: var(--primary);"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
                  />
                </svg>
                图片预览
              </h2>
              <span id="imageCount" class="text-sm font-medium px-3 py-1 rounded-full" style="color: var(--text-secondary); background: var(--shadow-dark);">0 张图片</span>
            </div>
            <div
              id="imagePreviews"
              class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 min-h-[120px]"
            ></div>
          </div>
        </div>

        <!-- 右侧配置面板 -->
        <div class="space-y-6">
          <!-- PDF设置区域 -->
          <div class="neumorphism-card p-6">
            <h2 class="text-xl font-semibold mb-6 flex items-center gap-3" style="color: var(--text-primary);">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                style="color: var(--primary);"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
              PDF设置
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="form-label">页面大小</label>
                <select id="pageSize" class="neumorphism-select">
                  <option value="a4">A4 (210×297mm)</option>
                  <option value="letter">Letter (216×279mm)</option>
                </select>
              </div>
              <div>
                <label class="form-label">方向</label>
                <select id="orientation" class="neumorphism-select">
                  <option value="portrait">纵向</option>
                  <option value="landscape">横向</option>
                </select>
              </div>
              <div>
                <label class="form-label">边距 (mm)</label>
                <input
                  type="number"
                  id="margin"
                  value="10"
                  min="0"
                  max="50"
                  class="neumorphism-input"
                />
              </div>
              <div>
                <label class="form-label">背景图 (可选)</label>
                <input
                  type="file"
                  id="backgroundInput"
                  accept="image/*"
                  class="neumorphism-input"
                  style="padding: 8px 12px;"
                />
              </div>
            </div>

            <div class="mt-6">
              <h3 class="section-title">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 6h16M4 12h16m-7 6h7"
                  />
                </svg>
                页眉页脚设置
              </h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="form-label">页眉文字</label>
                  <input
                    type="text"
                    id="headerText"
                    class="neumorphism-input"
                    placeholder="例如：公司名称"
                  />
                </div>
                <div>
                  <label class="form-label">页脚文字</label>
                  <input
                    type="text"
                    id="footerText"
                    class="neumorphism-input"
                    placeholder="例如：页码或日期"
                  />
                </div>
              </div>
            </div>

            <div class="mt-6">
              <h3 class="section-title">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-4 w-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a1.994 1.994 0 01-1.414.586H7a4 4 0 01-4-4V7a4 4 0 014-4z"
                  />
                </svg>
                水印设置
              </h3>
              <input
                type="text"
                id="watermarkText"
                class="neumorphism-input"
                placeholder="例如：草稿或机密"
              />
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex flex-col sm:flex-row gap-4">
            <button
              id="generateBtn"
              class="flex-1 neumorphism-button flex items-center justify-center gap-2 mb-8"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
              生成 PDF
            </button>
            <a
              id="downloadBtn"
              href="#"
              download="images.pdf"
              class="flex-1 neumorphism-button secondary-button flex items-center justify-center gap-2 hidden mb-8"
              style="background: linear-gradient(135deg, #10b981, #059669); color: white;"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                />
              </svg>
              下载 PDF
            </a>
          </div>
        </div>
      </div>

      <!-- PDF预览区域 -->
        <div class="neumorphism-card p-6">
          <h2 class="text-xl font-semibold mb-6 flex items-center gap-3" style="color: var(--text-primary);">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              style="color: var(--primary);"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              />
            </svg>
            PDF预览
          </h2>
          <span id="pdfPageCount" class="text-sm opacity-70">0 页</span>
        </div>
        <iframe
          id="preview"
          class="w-full h-[500px] rounded-xl border bg-white"
        ></iframe>
      </div>
    </div>

    <!-- 页脚 -->
    <footer
      class="text-center py-6 mt-8 text-sm opacity-80 border-t border-gray-200"
    >
      <p>© 2025 图片转PDF工具 | 当前时间: <span id="currentTime"></span></p>
    </footer>
    <script>
      const { jsPDF } = window.jspdf

      // 根据当前时间设置主题[6,8](@ref)
      function setThemeByTime() {
        const now = new Date()
        const hour = now.getHours()
        const themes = [
          'night',
          'morning',
          'noon',
          'afternoon',
          'evening',
          'night',
        ]
        const themeTimes = [0, 6, 11, 14, 18, 22]

        let themeIndex = 0
        for (let i = 1; i < themeTimes.length; i++) {
          if (hour >= themeTimes[i - 1] && hour < themeTimes[i]) {
            themeIndex = i - 1
            break
          }
        }

        document.body.className = document.body.className.replace(
          /\b\w+-theme/g,
          ''
        )
        document.body.classList.add(`${themes[themeIndex]}-theme`)

        // 应用主题色到元素
        document.documentElement.style.setProperty(
          '--theme-primary',
          `var(--primary)`
        )
        document.documentElement.style.setProperty('--theme-bg', `var(--bg)`)
        document.documentElement.style.setProperty(
          '--theme-card',
          `var(--card)`
        )

        // 更新UI颜色
        document.documentElement.style.backgroundColor = `var(--theme-bg)`
        document.documentElement.style.color = `var(--text-color)`

        // 更新按钮样式
        const primaryBtn = document.getElementById('generateBtn')
        if (primaryBtn) {
          primaryBtn.style.backgroundColor = `var(--theme-primary)`
          primaryBtn.style.color = '#fff'
        }

        // 更新卡片背景
        const cards = document.querySelectorAll('.bg-white')
        cards.forEach((card) => {
          card.style.backgroundColor = `var(--theme-card)`
        })

        // 更新时间显示
        const timeDisplay = document.getElementById('currentTime')
        if (timeDisplay) {
          timeDisplay.textContent = now.toLocaleTimeString()
        }
      }

      // 初始化时间主题
      setThemeByTime()
      // 每分钟更新一次主题
      setInterval(setThemeByTime, 60000)

      // 文件操作函数
      function readFileAsDataURL(file) {
        return new Promise((res, rej) => {
          const reader = new FileReader()
          reader.onload = () => res(reader.result)
          reader.onerror = () => rej(reader.error)
          reader.readAsDataURL(file)
        })
      }

      function loadImage(src) {
        return new Promise((res, rej) => {
          const img = new Image()
          img.onload = () => res(img)
          img.onerror = rej
          img.src = src
        })
      }

      // 拖放上传功能
      const dropArea = document.getElementById('dropArea')
      const imagesInput = document.getElementById('imagesInput')
      const imagePreviews = document.getElementById('imagePreviews')

      dropArea.addEventListener('click', () => imagesInput.click())
      ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
        dropArea.addEventListener(eventName, preventDefaults, false)
      })

      function preventDefaults(e) {
        e.preventDefault()
        e.stopPropagation()
      }

      ;['dragenter', 'dragover'].forEach((eventName) => {
        dropArea.addEventListener(eventName, highlight, false)
      })
      ;['dragleave', 'drop'].forEach((eventName) => {
        dropArea.addEventListener(eventName, unhighlight, false)
      })

      function highlight() {
        dropArea.classList.add('border-opacity-100', 'bg-gray-100/50')
      }

      function unhighlight() {
        dropArea.classList.remove('border-opacity-100', 'bg-gray-100/50')
      }

      dropArea.addEventListener('drop', handleDrop, false)

      function handleDrop(e) {
        const dt = e.dataTransfer
        const files = dt.files
        imagesInput.files = files
        handleFiles(files)
      }

      imagesInput.addEventListener('change', (e) => {
        handleFiles(e.target.files)
      })

      // 处理上传的图片并生成预览
      function handleFiles(files) {
        imagePreviews.innerHTML = ''

        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          if (!file.type.match('image.*')) continue

          const reader = new FileReader()
          reader.onload = (function (file) {
            return function (e) {
              const div = document.createElement('div')
              div.className = 'relative group'

              const img = document.createElement('img')
              img.src = e.target.result
              img.className = 'rounded-lg object-cover h-32 w-full border'

              const overlay = document.createElement('div')
              overlay.className =
                'absolute inset-0 bg-black/50 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity'

              const name = document.createElement('p')
              name.className = 'text-white text-xs truncate px-2'
              name.textContent = file.name

              overlay.appendChild(name)
              div.appendChild(img)
              div.appendChild(overlay)
              imagePreviews.appendChild(div)
            }
          })(file)
          reader.readAsDataURL(file)
        }
      }
      // ===== 1. 定义字体加载函数 =====
      async function loadChineseFont() {
        return new Promise((resolve, reject) => {
          // 直接通过fetch加载TTF文件
          fetch('./SourceHanSansCN-Regular.ttf')
            .then((response) => response.arrayBuffer())
            .then((data) => {
              // 将ArrayBuffer转为Base64
              const uint8Array = new Uint8Array(data)
              let binaryString = ''
              uint8Array.forEach((byte) => {
                binaryString += String.fromCharCode(byte)
              })
              const base64Data = btoa(binaryString)
              resolve(base64Data)
            })
            .catch((error) =>
              reject(new Error('字体加载失败: ' + error.message))
            )
        })
      }

      // ===== 2. 注册字体到jsPDF =====
      function registerFont(pdf, fontData) {
        const fontName = 'SourceHanSansCN-Regular'
        const fontFileName = 'SourceHanSansCN-Regular.ttf'

        // 注册字体
        pdf.addFileToVFS(fontFileName, fontData)
        pdf.addFont(fontFileName, fontName, 'normal')
        return fontName
      }

      // 添加多行水印（每行3个）
      function addMultiLineWatermark(pdf, watermark, pageWidth, pageHeight) {
        const fontSize = 40
        const opacity = 0.2
        const textColor = 150

        pdf.setFontSize(fontSize)
        pdf.setTextColor(textColor)

        // 计算水印间距和行数
        const watermarkWidth = pdf.getStringUnitWidth(watermark) * fontSize // 水印文本宽度
        const horizontalSpacing = pageWidth / 3 // 每行3个水印的横向间距
        const verticalSpacing = 100 // 纵向间距（根据需求调整）

        // 计算水印行数（纵向铺满）
        const rowCount = Math.ceil(pageHeight / verticalSpacing)

        // 循环绘制水印
        for (let row = 0; row < rowCount; row++) {
          for (let col = 0; col < 3; col++) {
            // 每行固定3个
            const x = col * horizontalSpacing + horizontalSpacing / 2 // 居中定位
            const y = row * verticalSpacing

            pdf.text(watermark, x, y, {
              align: 'center',
              angle: 45,
              opacity: opacity,
            })
          }
        }
      }
      // 生成PDF功能
      document
        .getElementById('generateBtn')
        .addEventListener('click', async () => {
          // 加载字体
          const fontData = await loadChineseFont()

          const files = Array.from(document.getElementById('imagesInput').files)
          if (!files.length) return alert('请选择至少一张图片')

          const pageSize = document.getElementById('pageSize').value
          const orientation = document.getElementById('orientation').value
          const margin =
            parseFloat(document.getElementById('margin').value) || 0
          const headerText = document.getElementById('headerText').value.trim()
          const footerText = document.getElementById('footerText').value.trim()
          const watermark = document
            .getElementById('watermarkText')
            .value.trim()
          const bgFile = document.getElementById('backgroundInput').files[0]
          const backgroundDataURL = bgFile
            ? await readFileAsDataURL(bgFile)
            : null

          const pdf = new jsPDF({ unit: 'mm', format: pageSize, orientation })
          const pageWidth = pdf.internal.pageSize.getWidth()
          const pageHeight = pdf.internal.pageSize.getHeight()

          // 显示加载状态
          const generateBtn = document.getElementById('generateBtn')
          const originalBtnText = generateBtn.innerHTML
          generateBtn.innerHTML =
            '<span class="animate-spin">⏳</span> 正在生成...'
          generateBtn.disabled = true

          const fontName = registerFont(pdf, fontData)
          pdf.setFont(fontName)
          pdf.setFontSize(12)

          try {
            for (let i = 0; i < files.length; i++) {
              const imgDataURL = await readFileAsDataURL(files[i])
              const img = await loadImage(imgDataURL)

              // 添加背景图
              if (backgroundDataURL) {
                pdf.addImage(
                  backgroundDataURL,
                  'JPEG',
                  0,
                  0,
                  pageWidth,
                  pageHeight
                )
              }

              // 图片等比缩放
              let imgW = img.width,
                imgH = img.height
              const ratio = Math.min(
                (pageWidth - margin * 2) / imgW,
                (pageHeight - margin * 2) / imgH
              )
              imgW *= ratio
              imgH *= ratio
              const x = (pageWidth - imgW) / 2
              const y = (pageHeight - imgH) / 2

              // 添加图片到PDF
              pdf.addImage(imgDataURL, 'JPEG', x, y, imgW, imgH)

              // 添加页眉
              if (headerText) {
                pdf.setFont(fontName)
                pdf.setFontSize(12)
                pdf.setTextColor(100)
                pdf.text(headerText, margin, 10)
              }

              // 添加页脚
              if (footerText) {
                pdf.setFont(fontName)
                pdf.setFontSize(10)
                pdf.setTextColor(100)
                if (footerText === '页码') {
                  pdf.text(`${i + 1}`, margin, pageHeight - 5)
                } else if (footerText === '日期') {
                  pdf.text(
                    new Date().toLocaleDateString(),
                    margin,
                    pageHeight - 5
                  )
                } else {
                  pdf.text(footerText, margin, pageHeight - 5)
                }
              }

              // 添加水印
              if (watermark) {
                pdf.setFont(fontName)
                addMultiLineWatermark(pdf, watermark, pageWidth, pageHeight)
              }

              if (i < files.length - 1) pdf.addPage()
            }

            // 生成PDF文件
            const blob = pdf.output('blob')
            const url = URL.createObjectURL(blob)

            // 显示预览和下载按钮
            document.getElementById('preview').src = url
            const downloadBtn = document.getElementById('downloadBtn')
            downloadBtn.href = url
            downloadBtn.classList.remove('hidden')
            downloadBtn.classList.add('flex')

            // 恢复按钮状态
            generateBtn.innerHTML = '✅ 生成成功!'
            setTimeout(() => {
              generateBtn.innerHTML = originalBtnText
              generateBtn.disabled = false
            }, 2000)
          } catch (error) {
            console.error('生成PDF失败:', error)
            alert('生成PDF时出错: ' + error.message)
            generateBtn.innerHTML = '❌ 生成失败，重试'
            setTimeout(() => {
              generateBtn.innerHTML = originalBtnText
              generateBtn.disabled = false
            }, 3000)
          }
        })

      // 初始设置
      setThemeByTime()
    </script>
  </body>
</html>
